import { Directive } from 'vue';
import vtTouchCom from '../v-drag/vtTouchCom.ts';
// 定义指令绑定值的类型
interface ResizeBindingValue {
    ujt?: any;
    scale?: number;
    type?: number;
    cut?: number;
    min?: number;
    id: string;
}

const vResizeflexwidthzoom: Directive = {
    // 指令挂载到元素上时调用
    mounted(el, binding) {
        const { fnPThrottle, vtTouchInit, vtTouchDown, vtTouchUp } = vtTouchCom(
            el,
            binding.value
        );
        vtTouchInit(el);
        const { ujt, scale, id, type, cut, min }: ResizeBindingValue =
            binding.value;
        // 获取缩放比例，优先使用传入的 scale，其次是 ujt.$global.scale，默认值为 1
        const getScale = () => scale || ujt?.$global?.scale || 1;
        // 获取最大区域信息，若 ujt 中没有相关设置，使用默认值
        const maxArea = {
            width: ujt?.$global?.sys?.zoomwidth || 1920,
            height: ujt?.$global?.sys?.zoomheight || 1200,
        };
        let cutSize = cut || 0;
        if (type) {
            maxArea.height = maxArea.height - cutSize;
        } else {
            maxArea.width = maxArea.width - cutSize;
        }
        function getSize() {
            if (typeof min === 'function') {
                return min()
            } else if (typeof min?.value === 'number') {
                return min?.value
            } else if (typeof min === 'number') {
                return min;
            } else {
                return 100;
            }
        }
        let targetEl: any;
        let curScale = 1;
        let isDragging = false;
        let startX = 0;
        let startWidth = 0;
        let startY = 0;
        let startHeight = 0;

        // 鼠标按下事件处理函数
        const onPointerDown = (e: PointerEvent) => {
            targetEl = document.getElementById(id);
            // 若未找到目标元素，输出错误信息并终止执行
            if (!targetEl) {
                console.error(`未找到 ID 为 ${id} 的元素`);
                return;
            }
            vtTouchDown(el);
            e.preventDefault();
            curScale = getScale();
            isDragging = true;
            if (type) {
                startY = e.clientY;
                startHeight = targetEl.offsetHeight;
            } else {
                startX = e.clientX;
                startWidth = targetEl.offsetWidth;
            }
            // 绑定鼠标移动和抬起事件
            document.addEventListener('pointermove', onPointerMove);
            document.addEventListener('pointerup', onPointerUp);
        };

        // 鼠标移动事件处理函数
        const onPointerMove = (e: PointerEvent) => {
            if (isDragging) {
                fnPThrottle(() => {
                    if (type) {
                        const dy = (startY - e.clientY) / curScale;
                        const newHeight = Math.max(getSize(), startHeight + dy);
                        // 限制最大宽度
                        targetEl.style.height =
                            Math.min(newHeight, maxArea.height) + 'px';
                        targetEl.style.minHeight =
                            Math.min(newHeight, maxArea.height) + 'px';
                    } else {
                        const dx = (startX - e.clientX) / curScale;
                        const newWidth = Math.max(getSize(), startWidth + dx);
                        // 限制最大宽度
                        targetEl.style.width =
                            Math.min(newWidth, maxArea.width) + 'px';
                        targetEl.style.minWidth =
                            Math.min(newWidth, maxArea.width) + 'px';
                    }
                });
            }
        };

        // 鼠标抬起事件处理函数
        const onPointerUp = () => {
            isDragging = false;
            vtTouchUp(el);
            // 移除鼠标移动和抬起事件
            document.removeEventListener('pointermove', onPointerMove);
            document.removeEventListener('pointerup', onPointerUp);
        };

        // 为元素绑定鼠标按下事件
        el.addEventListener('pointerdown', onPointerDown);

        // 定义卸载时清理事件的方法
        const unmount = () => {
            el.removeEventListener('pointerdown', onPointerDown);
        };
        el.__unmountResize = unmount;
    },
    // 指令从元素上卸载时调用
    unmounted(el: any) {
        if (el.__unmountResize) {
            el.__unmountResize();
            delete el.__unmountResize;
        }
    },
};

export default vResizeflexwidthzoom;
